<html>
<head>
    <title>resume管理页面</title>
    <link rel="stylesheet" href="/bootstrap/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/bootstrap/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">
    <script src="/jquery/jquery.min.js"></script>
    <script src="/bootstrap/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="/bootstrap/bootstrap-table/bootstrap-table.js"></script>
    <script src="/bootstrap/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script src="/bootstrap/bootstrap-table/export/bootstrap-table-export.js"></script>
    <script src="/bootstrap/bootstrap-table/export/tableExport.js"></script>
    <script src="/layer/layer.js"></script>
    <script src="/bootstrap/bootstrap-valid/bootstrapValidator.min.js"></script>
    <script src="/bootstrap/bootstrap-valid/zh_CN.js"></script>
</head>
<body>
<form class="form-horizontal" id="searchForm" onsubmit="return search();">
    <div class="row">
        <div class="col-sm-5">
            <div class="form-group">

                <label class="col-sm-3 control-label">名称</label>
                <div class="col-sm-9">
                    <input class="form-control input-sm" name="name" placeholder=""/>
                </div>

            </div>

        </div>
        <div class="col-sm-5">
            <div class="form-group">

                <label class="col-sm-3 control-label">电话</label>
                <div class="col-sm-9">
                    <input class="form-control" name="phone" placeholder=""/>
                </div>

            </div>
        </div>
    </div>
    <div class="box-footer">
        <button type="submit" class="btn btn-primary btn-sm">
            <i class="fa fa-search"></i>&nbsp;搜索
        </button>
        <button type="button" class="btn btn-info btn-sm" onclick="showModal(-1);">
            <i class="fa fa-plus"></i>&nbsp;添加
        </button>
    </div>
</form>

<table id="dataTable"></table>


<script>
    var table = null;
    $(function(){
        var option = {
            contentType: "application/x-www-form-urlencoded",
            method: "post",
            striped: true,
            cache: false,
            exportTypes:['csv', 'excel'],           //导出文件类型
            exportOptions: {},
            minimumCountColumns: 2,
            queryParamsType: "",
            showColumns:true,
            showExport:true,
            columns:[{"title":"id","field":"id"},
                {"title":"名称","field":"name"},
                {"title":"地址","field":"address"},
                {"title":"电话","field":"phone"},
                {"title":"操作","field":"id",
                    formatter:function(value, item) {
                        var html = `
                    <button type="button" class="btn btn-info" onclick="showModal(`+value+`);">
                    <i class="fa fa-edit"></i></button>
                    `;
                        html+=`<button type="button" class="btn btn-info" onclick="doDelete(`+value+`);">
                            <i class="fa fa-remove"></i></button>`;
                        return html;
                    }
                },
            ],
            url:"/resume/queryAll"
        }
        table = $("#dataTable").bootstrapTable(option);
        $('#dataForm').bootstrapValidator({
            live: 'enabled',
            message: '该字段必填',
        });
    });
    function search() {
        var obj = $("#searchForm").serializeArray();
        var param = {};
        $.each(obj, function(i, field){
            param[field.name]=field.value;
        });
        $("#dataTable").bootstrapTable('refresh',{query:param});
        return false;
    }
    function showModal(id) {
        $.post("/resume/detail?id=" + id, function(data) {
            $("#dataForm [name='name']").val(data.name);
            $("#dataForm [name='phone']").val(data.phone);
            $("#dataForm [name='address']").val(data.address);
        });
        $.ajaxSetup({
            async: false
        });
        layer.open({
            type: 1,
            shadeClose: true,
            title: '详情页面',
            area: ['800px', '300px'], //宽高
            scrollbar: false,
            content: $('#form-modal'),
            btn: ['提交'],
            yes: function(index, layero){
                var obj = $("#dataForm").serializeArray();
                var param = {};
                $.each(obj, function(i, field){
                    param[field.name]=field.value;
                });
                if (id != -1) {
                    param.id = id;
                }
                $('#dataForm').bootstrapValidator('validate');
                var valid = $('#dataForm').data('bootstrapValidator').isValid();
                if (valid) {
                    $.post("/resume/doSave", param ,
                        function(data){
                            layer.msg('操作成功', {icon: 1});
                            $("#dataTable").bootstrapTable('refresh');
                        });
                    layer.close(index)
                }
            }
        });
    }
    function doDelete(value) {
        layer.confirm('确定要删除数据?', {
            btn: ['确定'] //按钮
        }, function(){
            $.post("/resume/delete", {id:value} ,
                function(data){
                    layer.msg('操作成功', {icon: 1});
                    $("#dataTable").bootstrapTable('refresh');
                });
        });
    }
</script>

<div id="form-modal" style="display: none;">
    <form class="form-horizontal" id="dataForm">
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">

                    <label class="col-sm-3 control-label">名称</label>

                    <div class="col-sm-5">
                        <input class="form-control" name="name" value="" required/>
                    </div>

                </div>
                <div class="form-group">

                    <label class="col-sm-3 control-label">电话</label>

                    <div class="col-sm-5">
                        <input class="form-control" name="phone" value="" required/>
                    </div>

                </div>
                <div class="form-group">

                    <label class="col-sm-3 control-label">地址</label>

                    <div class="col-sm-5">
                        <input class="form-control" name="address" value=""/>
                    </div>

                </div>
            </div>


        </div>
        <input name="id" type="hidden"/>
    </form>
</div>

</body>
</html>